<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js" ></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>
<div id="div">
	<!--
		新增用户
			添加的用户编码(用户名)必须唯一，不能重复
			用户类别从数据库表smbms_role中查询
	-->
    <h4>新增用户</h4>
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="用户编码(账号)" prop="userCode">
            <el-input v-model="addForm.userCode"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
            <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
		<el-form-item label="用户密码" prop="userPassword">
		    <el-input  v-model="addForm.userPassword"></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="gender">
		    <el-radio v-model="addForm.gender" label="1" >男</el-radio>
		    <el-radio v-model="addForm.gender" label="2" >女</el-radio>
		</el-form-item>
		<el-form-item label="出生日期" prop="birthday">
		    <el-date-picker
			  v-model="addForm.birthday"
			  type="date"
			  placeholder="选择日期"
			  value-format="yyyy-MM-dd">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="手机" prop="phone">
		    <el-input  v-model="addForm.phone"></el-input>
		</el-form-item>
		<el-form-item label="地址" prop="address">
		    <el-input  v-model="addForm.address"></el-input>
		</el-form-item>
		<el-form-item label="用户角色" prop="userRole">
		    <el-select v-model="addForm.userRole" placeholder="请选择" >
				<el-option
						v-for="item in userRoleList"
						:key="item.id"
						:label="item.roleName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
            <el-button @click="resetForm('addForm')">清空</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                addForm: {
                    gender: '1',
                    birthday: '',
                    status: 1 // 默认为正常状态
                },
				userRoleList:[  //用户角色从数据库表中查询,此处数据为测试数据
				],
                rules: {
                    userCode: [{
                    	required: true,
                    	message: '请输入用户编码',
                    	trigger: 'blur'
                    }],
                    userName: [{
                    	required: true,
                    	message: '请输入用户名称',
                    	trigger: 'blur'
                    }]
                }
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
							// 显示加载中提示
							const loading = this.$loading({
								lock: true,
								text: '提交中...',
								spinner: 'el-icon-loading',
								background: 'rgba(0, 0, 0, 0.7)'
							});
							
							// 获取登录用户ID
							const loginUserStr = localStorage.getItem("loginUser");
							if (loginUserStr) {
								const loginUser = JSON.parse(loginUserStr);
								this.addForm.createdBy = loginUser.id;
							}
							
							// 发送请求
							axios({
								method: 'post',
								url: server_url + "/user/add",
								data: this.addForm,
								headers: {
									'Content-Type': 'application/json'
								},
								withCredentials: true // 确保跨域请求发送cookie
							}).then(resp => {
								loading.close(); // 关闭加载提示
								console.log('添加用户响应:', resp.data);
								
								// 判断结果
								if (resp.data.flag) {
									// 提示成功消息
									this.$message({
										message: resp.data.message || "添加用户成功",
										type: 'success'
									});
									// 添加结束后清空表单
									this.$refs[formName].resetFields();
								} else {
									this.$message.error(resp.data.message || "添加用户失败");
								}
							}).catch(err => {
								loading.close();
								console.error('添加用户错误:', err);
								this.$message.error("添加用户失败: " + (err.response ? err.response.data.message : err.message));
							});
                        }
                    });
                },
				queryAllRoles(){  //获取所有的角色
					//发送请求
					axios({
						method: 'get',
						url: server_url + "/user/roles",
						withCredentials: true // 确保跨域请求发送cookie
					}).then(resp => {
						console.log('获取角色列表响应:', resp.data);
						//判断结果
						if(resp.data.flag){
							this.userRoleList = resp.data.data;
						} else {
							this.$message.error(resp.data.message || "获取角色列表失败");
						}
					}).catch(err => {
						console.error('获取角色列表错误:', err);
						this.$message.error("获取角色列表失败，请检查网络连接");
					});
				}
            },
			mounted:function(){
            	//页面加载时请求服务端获取用户角色渲染到下拉框中
				this.queryAllRoles();
			}
        }
    );
</script>
</html>